<template>
  <el-row class="h-full" :gutter="6">
    <el-col :span="5">
      <el-card
        shadow="always"
        class="h-full p-2 box-border"
        :body-style="{ padding: 0, height: '100%' }"
      >
        <div class="h-full flex flex-col justify-between">
          <div class="flex items-center">
            <span class="w-20 text-center">关节1</span>
            <el-input-number
              v-model="armData.x"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
          <div class="flex items-center">
            <span class="w-20 text-center">关节2</span>
            <el-input-number
              v-model="armData.y"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
          <div class="flex items-center">
            <span class="w-20 text-center">关节3</span>
            <el-input-number
              v-model="armData.z"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
          <div class="flex items-center">
            <span class="w-20 text-center">关节4</span>
            <el-input-number
              v-model="armData.rx"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
          <div class="flex items-center">
            <span class="w-20 text-center">关节5</span>
            <el-input-number
              v-model="armData.ry"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
          <div class="flex items-center">
            <span class="w-20 text-center">关节6</span>
            <el-input-number
              v-model="armData.rz"
              size="small"
              class="flex-1"
              :min="-180"
              :max="180"
              @change="handleControlArmPose"
            />
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="3">
      <div class="h-full flex flex-col justify-between">
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>开关</div>
            <el-switch
              :model-value="armData.runningStatus"
              @change="(val) => handleSwitch(val, switchMap.runningStatus)"
            />
          </div>
        </el-card>
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>使能</div>
            <el-switch
              :model-value="armData.enableStatus"
              @change="(val) => handleSwitch(val, switchMap.enableStatus)"
            />
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="h-full flex flex-col justify-between">
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>解除警告</div>
            <el-switch
              :model-value="armData.errorStatus"
              @change="(val) => handleSwitch(val, switchMap.errorStatus)"
            />
          </div>
        </el-card>
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>拖拽模式</div>
            <el-switch
              :model-value="armData.dragStatus"
              @change="(val) => handleSwitch(val, switchMap.dragStatus)"
            />
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="h-full flex flex-col justify-between">
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>电机上电</div>
            <el-switch
              :model-value="armData.online"
              @change="(val) => handleSwitch(val, switchMap.online)"
            />
          </div>
        </el-card>
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>急停</div>
            <el-switch
              :model-value="armData.jogStatus"
              @change="(val) => handleSwitch(val, switchMap.jogStatus)"
            />
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="4">
      <el-card
        shadow="always"
        class="h-full px-2 pt-2 box-border"
        :body-style="{ height: '100%', padding: 0 }"
      >
        <el-row :gutter="6" class="h-full">
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('zoom', 1)"
              >放大</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('tilt', -1)"
              >上</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('zoom', -1)"
              >缩小</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('pan', 1)"
              >左</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2">
            <div class="w-full h-full flex items-center justify-center">
              云台
            </div>
          </el-col>
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('pan', -1)"
              >右</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2"> </el-col>
          <el-col :span="8" class="mb-2">
            <el-button class="w-full h-full" @click="handlePanTilt('tilt', 1)"
              >下</el-button
            >
          </el-col>
          <el-col :span="8" class="mb-2"> </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="3">
      <div class="h-full flex flex-col justify-between">
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>警报</div>
            <el-switch :model-value="alarm" @change="handleToggleAlarm" />
          </div>
        </el-card>
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>大灯</div>
            <el-switch :model-value="light" @change="handleToggleLight" />
          </div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="3">
      <div class="h-full flex flex-col justify-between">
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0 }"
        >
          <div class="flex flex-col justify-center items-center">
            <div>语音对讲</div>
            <el-switch :model-value="voice" @change="handleToggleVoice" />
          </div>
        </el-card>
        <el-card
          shadow="always"
          class="h-[49%] p-4 box-border"
          :body-style="{ padding: 0, height: '100%' }"
        >
          <div class="h-full flex flex-col justify-center items-center">
            <el-popover placement="top" :width="300" trigger="click">
              <template #reference>
                <el-button>红外遥控</el-button>
              </template>
              <template #default>
                <div>
                  <el-switch
                    v-model="remoteControlMode"
                    active-text="学习模式"
                    inactive-text="发射模式"
                  ></el-switch>
                </div>
                <div class="flex justify-around">
                  <el-button @click="handleRemoteControl(remoteControlMap.down)"
                    >▼</el-button
                  >
                  <el-button
                    @click="handleRemoteControl(remoteControlMap.switch)"
                    >开关</el-button
                  >
                  <el-button @click="handleRemoteControl(remoteControlMap.mode)"
                    >模式</el-button
                  >
                  <el-button @click="handleRemoteControl(remoteControlMap.up)"
                    >▲</el-button
                  >
                </div>
              </template>
            </el-popover>
          </div>
        </el-card>
      </div>
    </el-col>
  </el-row>
  <audio ref="audioRef" hidden controls autoplay></audio>
</template>
<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import {
  controlAlarm,
  controlArm,
  controlArmPose,
  controlLight,
  controlPanTilt,
  controlRemote,
  controlVoice,
  getArmStatus,
} from "../../../api/robotControl";
import { SrsRtcPlayerAsync, SrsRtcPublisherAsync } from "../../../utils/srsRtc";

const props = defineProps<{
  robotCode: string;
}>();

// 机械臂数据
const armData = ref({
  online: false,
  dragStatus: false,
  enableStatus: false,
  errorStatus: false,
  jogStatus: false,
  runningStatus: false,
  rx: 0,
  ry: 0,
  rz: 0,
  x: 0,
  y: 0,
  z: 0,
});

// 警报是否开启
const alarm = ref(false);

// 大灯是否开启
const light = ref(false);

// 语音对讲是否开启
const voice = ref(false);

// 切换警报开关
async function handleToggleAlarm(value: boolean) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  alarm.value = value;
  const data = {
    enable: value ? "1" : "0",
    robot: props.robotCode,
    volume: 100,
  };
  await controlAlarm(data);
}

// 切换大灯开关
async function handleToggleLight(value: boolean) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  light.value = value;
  const data = {
    enable: value ? "1" : "0",
    robot: props.robotCode,
  };
  await controlLight(data);
}

// 推送麦克风数据实例
let srs;

// 拉取机器人端麦克风数据实例
let voiceSrs;

// 音频播放器 DOM 元素
const audioRef = ref(null);

// 切换语音对讲开关
async function handleToggleVoice(value: boolean) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  voice.value = value;
  if (voice.value) {
    srs = new SrsRtcPublisherAsync();
    srs.publish(
      `webrtc://${location.hostname}/voice/client/${props.robotCode}`
    );
    voiceSrs = new SrsRtcPlayerAsync();
    audioRef.value.srcObject = voiceSrs.stream;
    voiceSrs.play(`webrtc://${location.hostname}/voice/${props.robotCode}`);
  } else {
    srs.close();
    voiceSrs.close();
  }
  const data = {
    enable: value ? "1" : "0",
    robot: props.robotCode,
    pullUrl: `webrtc://srs.zhenxiangsimple.cn/voice/client/${props.robotCode}`,
    pushUrl: `webrtc://srs.zhenxiangsimple.cn/voice/${props.robotCode}`,
  };
  await controlVoice(data);
}

// 监听选中机器人的切换
watch(
  () => props.robotCode,
  () => {
    voice.value = false;
    if (srs) {
      srs.close();
    }
    if (voiceSrs) {
      voiceSrs.close();
    }
    handleGetArmStatus();
  }
);

// 机械臂开关类型值
enum switchMap {
  runningStatus = 1,
  enableStatus = 2,
  errorStatus = 3,
  dragStatus = 4,
  online = 5,
  jogStatus = 6,
}

// 切换机械臂开关
async function handleSwitch(val, type) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  armData.value[switchMap[type]] = val;
  const data = {
    enable: val ? "1" : "0",
    robot: props.robotCode,
    type,
  };
  await controlArm(data);
}

// watch(armData, () => {
//   if (!props.robotCode) {
//     return ElMessage({ type: "warning", message: "请选择机器人" });
//   }
//   const data = {
//     robot: props.robotCode,
//     ...armData.value,
//   };
//   controlArmPose(data);
// });

// 控制云台
async function handlePanTilt(type, val) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  const data = {
    robot: props.robotCode,
    [type]: val,
  };
  await controlPanTilt(data);
}

// 红外遥控模式切换
const remoteControlMode = ref(false);

// 红外遥控各种控制映射值
enum remoteControlMap {
  switch = 1,
  mode = 2,
  up = 3,
  down = 4,
}

// 红外遥控切换模式
async function handleRemoteControl(index) {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  const data = {
    action: remoteControlMode.value ? "0" : "1",
    index,
    robot: props.robotCode,
  };
  await controlRemote(data);
}

// 获取机械臂状态
async function handleGetArmStatus() {
  const res = await getArmStatus(props.robotCode);
  armData.value = res.data || {};
}

// 控制机械臂关节运动
function handleControlArmPose() {
  if (!props.robotCode) {
    return ElMessage({ type: "warning", message: "请选择机器人" });
  }
  const data = {
    robot: props.robotCode,
    ...armData.value,
  };
  controlArmPose(data);
}
</script>
